-=-=-= ColorPad v2.3 =-=-=-=-=-=-=-=-=-=-=-=- How To Make A Skin! -=-

     So you want to make a skin aye?!  Thanks!  I love it when
 people make skins!  So be sure to send it to me when you're
 done :D


 TYPES OF SKINS
 --------------

    Let's get to it.  There are two types of skins you can create:

  1) A simple skin    - You, the skinner use the default button
                        positions and changes what they look like.

  2) A freestyle skin - You get to define ColorPad's own dimentions,
                        component (buttons, text and such) position,
                        and the overall look and feel. (cannot change
                        font)

    Both of these can be made using whatever graphic software you
  desire as long as it can load, save and edit bitmap (bmp) images.
  People have even made skins using MSPaint!


 SIMPLE SKIN CREATION
 --------------------

    A simple skin, is a skin that uses the default button position
  and size.  All it requires is that you make a bitmap (bmp)
  graphic that is 166 pixels wide by 132 pixels tall, and that you
  place the graphics for the buttons in the proper place on your
  image.  That's about it in a nutshell, but let's go into details!

    First off, you should go get something that we can reffer to.
  No, this isn't some huge program, it's a little skin pack! :)
  It can be found here:
   http://www.entic.net/~vmoya/download_software.html
  Or direct:
   http://www.entic.net/~vmoya/archive/software/colorpadskins.zip

    In this skin pack, are a few skins and a particular skin called 
  'mask.bmp'.  This is ColorPad's default skin mask.  A 'mask' can
  mean many things in the world of graphics.  In this case, it just
  means "this color means this is where xxxx goes."  Here is what
  each color means:

   Light green  - Where the normal menu, and color control buttons
                  are located.
   Dark green   - Where the 'pressed' versions of the buttons are
                  located.
   Light blue   - This is where the text fields will be displayed.
   Dark blue    - This is where the color screen is situated.
   Red          - This is the background of the skin (where users
                  can right-click to get to the menu, or left-
                  click and drag to move the application window.
   High Purple  - Transparency Color.  This is the color used to
                  crop the skin, and has a value of: #FF00FF
                  (Red:255  Green:0  Blue:255.)  As you can see,
                  this can be any size or shape, and can even go
                  over the buttons, color screen, and text fields!
   Gray         - Not used, this is actually a worthless part of the
                  skin.  I might add support later to use this for
                  when the window loses focus, so just keep that in
                  mind... ;)
   Black        - Do you see it?  Didn't think so, but it's there,
                  really!  This is a single pixel, and it is located
                  here-> x:83 y:0  This pixel should be the color
                  you want the text to be.

    So load up this graphic in whatever graphic program you wish.
  As long as it can save, load and edit bitmap (bmp) images, you'll
  be fine.  Now mess arround putting happyfaces or what-not on the
  graphic, and save it (as something else so you'll always have a
  backup of the original mask)  If you mess up the original mask.bmp
  you call always just download yourself another copy! :)

    After you've messed arround with the mask.bmp file, load it up
  and see what you've done!  Welp, to tell you the truth, I'm kinda
  hoping you're getting the hang of simple skinning for ColorPad...
  But if you're not, just open up the other skins in the skin pack
  and see what they look like, and perhaps this will help you out.
  Start with something simple, with no transparency and you should
  be fine.  


 FREESTYLE SKIN CREATION
 -----------------------

   Are you a renegade skinner?  Thought so :P well then this
 section's for you.  Let's get down to business.  I will refer to
 two files, the 'Skin BMP' and the 'Mask BMP'.  Here is what I mean
 by both so that we're clear on everything.

  Skin BMP - This is a single bmp file that has holds your actual
             skin/image.  It can be called 'whatever.bmp'

  Mask BMP - The Mask Image is a single bmp file that corresponds
             ( hopefully ;) ) to your Graphic Image, and is what
             ColorPad uses to figure out where all your buttons
             and stuff goes.  it should be called 'whatever_mask.bmp'
             the '_mask' is the important part here.

  Example: You want to name your skin 'super cool'; thus, your
           Skin BMP should be called 'super cool.bmp' and your
           Mask BMP should be called 'super cool_mask.bmp'. Yes,
           I know... I'm insulting your inteligence.
             

 - The Skin Bitmap:

    In general, your skin image should have what you want colorpad
  to look like.  And also have, somewhere, if at all, a pushed
  version of the buttons you wish your skin to have.  Be creative,
  do whatever you want! :)

 - The Skin Mask:

    Ok, this is the ugly, yet beautiful part of making a freestyle
  skin.  ColorPad recognizes where you want specific parts of your
  skin by looking for specific colors in the skin mask.  For example
  (and I'll go into detail about all the colors later) if you have a
  patch of red (FF0000 or Red:255 Green:0 Blue:0), colorpad will
  think this is where in the Skin Bitmap you have the graphic for
  the background skin image.  Make sure all your color areas are
  flat, and use exact colors.  What I mean by "flat" is that each
  color patch should be just that color, no gradients or dithering!
  What I mean by exact is that when you save the file, don't use the
  windows palette or a web-friendly palette.  Make sure each color
  retains it's exact color value, or else, you will not get the
  results you were hoping for.  Common problems doing this part
  wrong are:  Missing buttons/skin, weird transparent holes that are
  randomly or evenly distributed throughout the skin.
  

    Without further ado, here is a list of colors that are
  recognized by ColorPad, and what they stand for:


 (SECTION INFO)
  DECIMAL       HEX
  rrr,ggg,bbb   0xRRGGBB   Description
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

 (SKIN IMAGE)
  255,000,000   0xFF0000   Skin - Main graphic, not including buttons
                                  the color screen, or the text
                                  fields.

 (COLOR SCREEN)
  000,050,050   0x003232   Color screen - Displays last color when
                                          getting/making another
                                          color and split screen is
                                          turned on.
  000,100,100   0x006464   Color screen - Displays whatever color
                                          you have or are currently
                                          getting off the screen, or
                                          currently making.

 (TEXT COLOR/POSITION)
  000,000,000   0x000000   Default Text color - Location of the
                                                default text color.
                                                (can be overwritten
                                                by defining one or
                                                more of the below...)
  000,000,020   0x000014   Text color     - Red decimal text color
                                            (Location in the Skin
                                            Bitmap that actually
                                            holds the color)
  000,000,040   0x000028   Text color     - Green decimal text color
  000,000,060   0x00003C   Text color     - Blue decimal text color
  000,000,080   0x000050   Text color     - Red hexadecimal text color
  000,000,100   0x000064   Text color     - Green hexadecimal text color
  000,000,120   0x000078   Text color     - Blue hexadecimal text color
  000,000,140   0x00008C   Text possition - Red decimal value
                                            position (should be at
                                            least a 17x9 region)
  000,000,160   0x0000A0   Text possition - Green decimal value
                                            position (should be at
                                            least a 17x9 region)
  000,000,180   0x0000B4   Text possition - Blue decimal value
                                            position (should be at
                                            least 17x9 region)
  000,000,200   0x0000C8   Text possition - Red hexadecimal value
                                            position (should be at
                                            least 16x9 region)
  000,000,220   0x0000DC   Text possition - Green hexadecimal value
                                            position (should be at
                                            least 16x9 region)
  000,000,240   0x0000F0   Text possition - Blue hexadecimal value
                                            position (should be at
                                            least 16x9 region)

 (NORMAL BUTTONS)
  000,010,000   0x000A00   Normal button - Snap to screen
  000,025,000   0x001900   Normal button - Always on top
  000,040,000   0x002800   Normal button - Minimize
  000,055,000   0x003700   Normal button - Close
  000,070,000   0x004600   Normal button - Less red
  000,085,000   0x005500   Normal button - More red
  000,100,000   0x006400   Normal button - Less green
  000,115,000   0x007300   Normal button - More green
  000,130,000   0x008200   Normal button - Less blue
  000,145,000   0x009100   Normal button - More blue
  000,160,000   0x00A000   Normal button - Less white
  000,175,000   0x00AF00   Normal button - More whire

 (PUSHED BUTTONS)
  000,015,000   0x000F00   Pushed button - Snap to screen
  000,030,000   0x001E00   Pushed button - Always on top
  000,045,000   0x002D00   Pushed button - Minimize
  000,060,000   0x003C00   Pushed button - Close
  000,075,000   0x004B00   Pushed button - Less red
  000,090,000   0x005A00   Pushed button - More red
  000,105,000   0x006900   Pushed button - Less green
  000,120,000   0x007800   Pushed button - More green
  000,135,000   0x008700   Pushed button - Less blue
  000,150,000   0x009600   Pushed button - More blue
  000,165,000   0x00A500   Pushed button - Less white
  000,180,000   0x00B400   Pushed button - More white
 

 IMPORTANT: Wherever you stick the _NORMAL_ buttons/mask is where
            ColorPad will think you want them on the final skin.
            What I mean by this is that you will normally want the
            'normal' (not pushed) buttons to be somewhere on/amongst
            your main skin graphic, and not somewhere else by
            themselves. (Same goes for the text and color screen.)

            Also, you do not _HAVE_ to specify all these!  If you
            want a skin with just a color screen and a close button,
            by all means, only specify those two things in your
            graphics!! :)

    That's it!  If you're stuck, and things aren't working right,
  download the colorPadv2 skin pack and see how I've done things:

  http://www.entic.net/~vmoya/archive/software/colorpadv2skins.zip


 BONUS
 -----

    ColorPad will automatically snap to your skin's border,
  Even if you use weird transparency, or have a weird, funky free-
  style skin.


 LAST COMMENTS
 -------------

    I love to see what kind of skins people come up with, so don't
  forget to email them to me at vmoya@entic.net (or check the
  colorpad.txt for more contact info, and where to post your skins)
  I know this is the second time I've said this, but I mean it! :)

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= End Document -=-